<template>
  <div>
    <div>
      <div class="configIngImg" :class="packetStatus==0?'wait-icon-box':''">
        <!-- <i class="icon-64" :class="updateTips[packetStatus].icon"></i> -->
        <Iconfont class="icon-64" :type="updateTips[packetStatus].icon"></Iconfont>
      </div>
      <p :class="updateTips[packetStatus].tip_class">
        {{$store.state.language=='zh' ? updateTips[packetStatus].ch_tip : updateTips[packetStatus].en_tip}}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "PacketOperationTip",
  props: ['packetStatus'],
  data() {
    return {
      updateTips: {
        0: {
          icon: 'wait-tip-icon icon icon-inservice64f',
          ch_tip: '正在检测升级包，请稍候',
          en_tip: 'Please wait while the upgrade package is detected',
          tip_class: 'wait-tip'
        },
        1: {
          icon: 'warn-tip-icon icon icon-exclaim64f',
          ch_tip: '上传的升级包版本号低于当前系统版本号，无需升级',
          en_tip: 'The version number of the uploaded upgrade package is lower than the current system version number, so there is no need to upgrade',
          tip_class: 'update-tip'
        },
        2: {
          icon: 'warn-tip-icon icon icon-exclaim64f',
          ch_tip: '上传的升级包版本号与当前系统版本号相同，无需升级',
          en_tip: 'The version number of the uploaded upgrade package is the same as that of the current system, so no upgrade is required',
          tip_class: 'update-tip'
        },
        3: {
          icon: 'error-tip-icon icon icon-error64f',
          ch_tip: '系统升级安装包错误或已损坏，请返回上一步重新上传正确且完好安装包',
          en_tip: 'The system upgrade installation package is incorrect or damaged. Please go back to the previous step and upload the correct and intact installation package again',
          tip_class: 'update-tip'
        },
        4: {
          icon: 'ok-tip-icon icon icon-sure64f',
          ch_tip: '上传的升级包版本号新于当前系统版本号，可点击下一步按钮进行升级',
          en_tip: 'The version number of the uploaded upgrade package is newer than the current system version number. You can click the Next button to upgrade',
          tip_class: 'update-tip'
        },
        5: {
          icon: 'error-tip-icon icon icon-error64f',
          ch_tip: '服务异常，请重新上传',
          en_tip: 'Service exception, please upload again',
          tip_class: 'update-tip'
        },
      }
    }
  },
  methods: {
    
  },
}
</script>
<style scoped>
  .configIngImg {
    text-align: center;
    /* margin: 15px 0; */
  }
  .icon-64 {
    font-size: 64px;
  }
  .wait-tip-icon {
    color: var(--themeColor);
  }
  .error-tip-icon {
    color: var(--mainRedColor);
  }
  .warn-tip-icon {
    color: var(--mainOrangeColor);
  }
  .ok-tip-icon {
    color: var(--mainGreenColor);
  }
  .wait-icon-box {
    animation:iconRotate 2s linear infinite;
    -webkit-animation: iconRotate 2s linear infinite;
    -moz-animation: iconRotate 2s linear infinite;
    -o-animation: iconRotate 2s linear infinite;
  }
  @keyframes iconRotate{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
  }
  .wait-tip,
  .update-tip {
    /* margin: 10px 0; */
    text-align: center;
  }
  .update-tip {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .update-tip span{
    max-width: 400px;
    display: inline-block;
  }
  .wait-tip:after {
    content: "";
    animation: dotRunning 2s infinite;
    -webkit-animation: dotRunning 2s infinite;
  }
  @keyframes dotRunning {
    0%,100% {
      content: "";
    }
    25% {
      content: ".";
    }
    50% {
      content: "..";
    }
    75% {
      content: "...";
    }
  }
</style>